{% extends "../layout/layout.html" %}

{% block content %}

<section class="content-header">
    <h1> 文章管理 </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">文章管理</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div>
                        <!-- 搜索框显示区域 -->
                        <div class="searchDiv">
                            <label for="labelId">内容：</label>
                            <input type="text" class="form-control" id="key" placeholder="模糊：内容" />

                            <button type="button" id="searchBtn" class="btn btn-primary searchBtn">
                                <span class="glyphicon glyphicon-search arrow"></span> 搜索
                            </button>
                            <button type="button" id="clearBtn" class="btn btn-primary searchBtn"
                                onClick="clearSearchCondition(this);">
                                <span class="glyphicon glyphicon-trash arrow"></span> 清空
                            </button>
                        </div>

                        <!-- 数据常用操作按钮显示区域 -->
                        <div class="btn-group operatorBtnGroup" role="group" aria-label="...">
                            <button type="button" id="addBtn" class="btn btn-default"><span
                                    class="glyphicon glyphicon-plus arrow"></span> 新增</button>
                        </div>
                        <div class="btn-group operatorBtnGroup" role="group" aria-label="...">
                            <button type="button" id="batchDelBtn" class="btn btn-default"><span
                                    class="glyphicon glyphicon-trash arrow"></span> 批量删除</button>
                        </div>
                        <!-- 表格显示区域 -->
                        <div class="tableDiv">
                            <table id="listTable">
                                <!-- 定义表格的列宽 -->
                                <colgroup>
                                    <col style="width: 50px">
                                    <col style="">
                                    <col style="">
                                    <col style="width: 15%">
                                </colgroup>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<style>
    .modal-dialog {
        width: 90%;
    }
</style>

<script type="text/javascript">
    $(function () {
        // 初始化表格
        initTable();

        // 新增
        $('#addBtn').click(function () {
            var url = 'addView';
            defaultDialog('listTable', 'addNewsForm', url, '新增', '');
        });
        // 搜索
        $('#searchBtn').click(function () {
            $('#listTable').bootstrapTable("refreshOptions", {
                pageNumber: 1
            });
        });

        // 批量删除
        $('#batchDelBtn').click(function () {
            var ids = "";

            var select = $('#listTable').bootstrapTable('getSelections');
            for (var k = 0; k < select.length; k++) {
                ids = ids + select[k].id + ',';
            }
            if (ids == '') {
                toastr.warning("请至少选择一条数据");
                return;
            }

            del(ids);
        });
    });

    function initTable() {
        var fields = [{
                title: 'id',
                field: 'id',
                sortable: false
            },
            {
                title: '标题',
                field: 'title',
                sortable: false
            },

            {
                title: '操作',
                field: 'id',
                align: 'center',
                valign: 'middle',
                sortable: false,
                formatter: function (value, row, index) {
                    return thisColumnsFormatter(value, row, index);
                }
            }
        ];
        var columns = initColumns(true, fields);
        var url = 'table';
        initBootstrapTable('listTable', {
            'url': url,
            'queryParams': 'getLabelSearchParams',
            'columns': columns
        });
    }

    var thisColumnsFormatter = function (value, row, index) {


        var edit = '<a href="javascript:void(0);" mce_href="#" style="margin-left:5px" onclick="edit(\'' + row.id +
            '\')">编辑</a>';
        var f = '';
        var d = '<a href="javascript:void(0);" mce_href="#" style="margin-left:5px" onclick="del(\'' + row.id +
            '\')">删除</a>';
        return edit + f + d;
    }

    // 字段名与列名的映射，用于传递排序时的字段名称
    var fieldMapping = {};

    // 获取表格查询的参数
    function getLabelSearchParams(params) {
        var searchParams = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit, // 每页记录数
            offset: params.offset, // 当前页索引
            sortName: fieldMapping[params.sort], // 排序字段名
            sortOrder: params.order, // 排序方式
            key: $('#key').val()
            
        };
        return searchParams;
    }


    // 删除
    function del(ids) {
        var url = 'del';
        batchProcess('listTable', 'ids=' + ids, url, deleteTitle, deleteMsg);
    }

    // 编辑
    function edit(id) {
        var url = 'editView?id=' + id;
        defaultDialog('listTable', 'editForm', url, '编辑', '');
    }

    // 详情
    function detail(id) {
        var url = "detail?id=" + id;
        showView("详情", url);
    }
</script>

{% endblock %}